<template>
  <div class="app-container">
    <div class="layout-content" :class="{ 'full-screen': !$route.meta.showTabbar, 'no-nav': $route.meta.hideNavbar }">
      <keep-alive :include="keepAlivePages">
        <router-view></router-view>
      </keep-alive>
    </div>
    <div v-if="$route.meta.showTabbar" class="layout-footer">
      <tabbar :data="tabbars" />
    </div>
  </div>
</template>

<script>
import Tabbar from '@/components/Tabbar'
import { mapGetters } from 'vuex'
import { blackList } from '@/config'
export default {
  name: 'BasicLayout',
  data() {
    return {
      tabbars: [
        {
          title: '首页',
          to: {
            name: 'Home'
          },
          icon: {
            active: require('@/assets/images/icon_home_active.png'),
            inactive: require('@/assets/images/icon_home.png')
          }
        },
        {
          title: '审批',
          to: {
            name: 'Approve'
          },
          icon: {
            active: require('@/assets/images/icon_approve_active.png'),
            inactive: require('@/assets/images/icon_approve.png')
          }
        },
        {
          title: '资讯',
          to: {
            name: 'Information'
          },
          icon: {
            active: require('@/assets/images/icon_information_active.png'),
            inactive: require('@/assets/images/icon_information.png')
          }
        },
        {
          title: '我的',
          to: {
            name: 'Mine'
          },
          icon: {
            active: require('@/assets/images/icon_mine_active.png'),
            inactive: require('@/assets/images/icon_mine.png')
          }
        }
      ]
    }
  },
  components: {
    Tabbar
  },
  computed: {
    ...mapGetters(['isBack', 'keepAlivePages'])
  },
  watch: {
    // 监听路由变化，记录当前路由滚动条的偏移量到路由的元信息中，并记录当前操作是前进还是返回，根据操作类型添加相应的动画效果(动画未添加)
    $route(to, from) {
      const contentDom = document.querySelector('.layout-content')
      if (this.isBack) {
        from.meta.scrollTop = 0
      } else {
        from.meta.scrollTop = blackList.includes(from.name) ? 0 : contentDom.scrollTop
      }
      this.$store.commit('SET_ISBACK', false)
    }
  }
}
</script>

<style lang="less">
* {
  padding: 0;
  margin: 0;
}
.app-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  height: 100%;
  height: calc(~'100% + constant(safe-area-inset-top) + constant(safe-area-inset-bottom)');
  height: calc(~'100% + env(safe-area-inset-top) + env(safe-area-inset-bottom)');

  .layout-content {
    position: absolute;
    overflow-y: scroll;
    left: 0;
    width: 100%;
    top: 44px;
    top: calc(~'44px + constant(safe-area-inset-top)');
    top: calc(~'44px + env(safe-area-inset-top)');
    bottom: 50px;
    bottom: calc(~'50px + constant(safe-area-inset-bottom)');
    bottom: calc(~'50px + env(safe-area-inset-bottom)');
    &.no-nav {
      top: 0;
    }
    &.full-screen {
      bottom: 0;
      padding-bottom: 0;
      padding-bottom: constant(safe-area-inset-bottom);
      padding-bottom: env(safe-area-inset-bottom);
    }
  }
}
</style>
